<template>
  <div>
    <p>学生姓名:</p>
    <ul>
       <!--1.v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <!-- v-for="(值, 索引) in 目标结构" -->
      <li v-for="(item,index) in arr" :key="item">
      {{item}} ----{{index}}
      </li>
    </ul>
    <p>学生详细信息:</p>
    <ul>
       <!-- 语法2:v-for遍历数组对象
        v-for="对象名 in 目标结构" -->
      <li v-for="obj in stuArr " :key='obj.id'>
        <span>{{obj.name}}</span>
        <span>{{obj.sex}}</span>
        <span>{{obj.hobby}}</span>
      </li>
    </ul>
    <div>
       <!--语法3:v-for遍历对象(了解) -->
    <!-- v-for="(value值,key键)  in  对象" -->
      <p v-for="(value,key) in tObj" :key="key">
          <span>{{key}}</span>
          -------
          <span>{{value}}</span>
      </p>
    </div>
    <!-- 语法4:v-for遍历整数(了解) - 从1开始相当于for循环, -->
    <!-- v-for="变量名 in 固定数字" -->
    <p>序号</p>
      <div v-for="i in count" :key="i">{{ i }}</div>
  </div>
</template>

<script>
export default {
data(){
  return {
    arr: ["小明", "小欢欢", "大黄"],
stuArr: [
  {
    id: 1001,
    name: "孙悟空",
    sex: "男",
    hobby: "吃桃子",
  },
  {
    id: 1002,
    name: "猪八戒",
    sex: "男",
    hobby: "背媳妇",
  },
],
tObj: {
  name: "小黑",
  age: 18,
  class: "1期",
},
count: 10,
  }
}
}
</script>

<style>

</style>